<!DOCTYPE html>
<html class="ui-page-login">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>智能处理重点实验室设备管理系统-用户登录</title>
	<link rel="shortcut icon" href="favicon.ico"/>
	<link rel="bookmark" href="favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="../resource/css/animate/animate.min.css" />
	<script src="../resource/js/jquery.min.js"></script>
	<style type="text/css">
		body,html,b,h2,h1{
			margin:0;
			padding:0;
		}
		#zong{
			/*width:auto;
            height:auto;*/
			width:100%;
			height:auto;
			position:fixed;
			top:0;
			bottom:0;
			background-image: url(../resource/images/P22.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-color: rgba(55,55,55,0.8);
		}
		#loginkuang{
			height:400px;
			width:600px;
			position:relative;
			margin-left: 50%;
			left: -300px;
			background-color: rgba(0,0,0,0.5);
			box-shadow: 3px 3px 3px rgba(0,0,0,0.9);
			border-radius: 10px;
			/*margin-top: 10%;*/
			
			/*top:-200px;*/
			
			top:150px;
		}
		#logo{
			height:50px;
			width:225px;
			position: relative;
			top:70px;
			left:150px;
			/*background-color: rgba(0,0,0,0.5);*/
			line-height: 60px;
			color:#E6E6E6;
			font-family: "微软雅黑";
			font-size: 16px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(../resource/images/logo.png);
			text-align: center;
			font-weight: bold;
		}
		#biaoyu{
			height:50px;
			width:225px;
			position:fixed;
			bottom: 20px;
			right: 20px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(../resource/images/biaoyu.png);
		}
		#title{
			width:auto;
			height:50px;
			/*background-color: rgba(0,0,0,0.55);*/

			border-radius: 10px 10px 0 0;
			font-size: ;
		}
		#title > h2{
			font-family: "arial rounded mt bold";
			font-size: 20px;
			color:#E2E6EA;
			line-height: 60px;
			width:100px;
			display: inline-block;
			/*background-color: rgba(255,255,255,0.5);*/

		}
		#title> b{
			display: inline-block;
			float:right;
			line-height: 60px;
			color:#C8CBCF;
			font-size: 12px;
			/*background-color: rgba(255,255,255,0.5);*/
			margin-right: 10px;

		}
		#sname{
			width:400px;
			height:50px;
			background-color: rgba(0,0,0,0.5);
			position: relative;
			right:30px;
		}
		#tips{
			color:#6C757D;
			font-size: 10px;
			background-color: rgba(255,255,255,0.5);
			position: relative;
			top:10px;
		}
		#inf{
			position: relative;
			top:40px;
			/*background-color: rgba(0,0,0,0.5);*/
			/*text-align:center;*/
		}
		#inf > form > dl{
			/*margin-left: -80px;*/
			color: #D2D2D2;
			font-size: 12px;
			margin-bottom: 10px;
			/*background-color: rgba(0,0,0,0.8);*/
			margin-left: 135px;
		}
		#inf  form  dl dt{
			/*margin-left: -165px;*/
			margin-bottom: 10px;
			/*background-color: #EFEFF4;
            */
		}
		#inf input{
			cursor: pointer;
			width:300px;
			height:25px;
			border:solid 1px #6C757D;
			background-color: #EFEFF4;
			border-radius: 15px;
			outline:none;
			padding-left: 10px;
			box-shadow: 2px 2px 2px #23262E;
		}

		input#sub:hover{
			background: rgba(200,200,200,1) !important;

		}
		#msg{
			position: absolute;
			width:250px;
			height:30px;
			border-radius: 15px;
			/*background: #000000;*/
			bottom: 60px;
			right:110px;
			text-align: right;
			color:#DC3545;
			line-height: 30px;
			font-size: 12px;
			font-family: "微软雅黑";
		}

	</style>
	<script type="text/javascript">
		
		window.onload = function() {
			$(document).keydown(function(event){
				if(event.keyCode==13){
					var username=document.querySelector("#user").value;
					var passwd=document.querySelector("#pass").value;
				
				
					if(username==""||passwd==""){
						var msg=document.getElementById("msg");
						msg.classList.add("animated","bounceIn");
						msg.innerText="×用户名或者密码不能为空！";
						return;
					}else{
						document.getElementById("form1").submit();
					
					}
				}
				
			})
			
			document.querySelector("#sub").onclick = function(){
				var username=document.querySelector("#user").value;
				var passwd=document.querySelector("#pass").value;
				
				if(username==""||passwd==""){
//					alert("bunengweikunag");
//					console.log(passwd);
//					return;
					var msg=document.getElementById("msg");
//					var tips="用户名或者密码不能为空！";
					msg.classList.add("animated","bounceIn");
					msg.innerText="×用户名或者密码不能为空！";
//					alert("bunengweikunag");
				}else{
					document.getElementById("form1").submit();
				}
			}
		}
	</script>
</head>

<body>
<div id="zong">
	<div id="logo"></div>
	<!--<div id="sname"></div>-->
	<div id="loginkuang" class="animated bounce">
		<div id="title">
			<h2>&nbsp;&nbsp;&nbsp;&nbsp;LOGIN</h2>
			<b>equipment-management-system</b>
		</div>
		<div id="tips">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Please input validation information.</div>
		<div id="inf">
			<form id="form1" name="login" action="/login/user" method="POST">
				<dl>
					<dt>职工号:</dt>
					<dd><input id="user" type="text" value="" name="username" placeholder=" user-name..."/></dd>
				</dl>
				<dl>
					<dt>密码:</dt>
					<dd><input id="pass" type="password" value="" name="password" placeholder=" password..."/></dd>
				</dl>
				<dl>
					<dt>记住密码:</dt>
					<dd><input style="border:0px; width: 15px; height:15px; border-radius: 50%; display: inline-block; position: relative; top:-28px; left: 20px;" type="checkbox" value=""/></dd>
				</dl>

				<input id="sub" type="button" value="登录" style=" color:#4E555B; width:350px; height:27px; background:#EFEFF4; border:0; line-height: 27px; position: relative; left:135px;"/>
				<span id="msg" th:text="${msg}"></span>
			</form>
		</div>

	</div>
	<div id="biaoyu"></div>
</div>

</body>

</html>